<template>
    <div class="kform-item">
        <div class="kform-item-inner" @focusout="OutFocus">
            <span v-if="!!label" :style="{width: width + 'px'}">{{ label }}</span>
            <slot></slot>
        </div>
        <div class="kform-item-msg" :style="{paddingLeft: width + 'px'}">{{ message }}</div>
        
    </div>
</template>

<script setup>
import { inject,isRef, ref } from 'vue';

const props = defineProps({
    n: String,
    label: String,
})
const model=inject("model")
const rules=inject("rules")
const CheckArr =inject("CheckArr")
const width = inject("width")
const message = ref("")
let isR =false
let Check
let OutFocus = ()=>true
if (model&&props.n) {
    isR =  isRef(props.n.split(".").reduce((res,key)=>res[key],model)) 
    OutFocus = () => {
        let value = props.n.split(".").reduce((res,key)=>res[key],model)
        if (isR) {
            value = value.value
        }
        message.value=Check&&Check(value)
        return !!(message.value===""||message.value===null||message.value===undefined)
    }
}

if (!!rules){
    Check = rules[props.n]
    Check&&CheckArr.push(OutFocus)
}


</script>

<style>
.kform-item{
    margin-bottom: 5px;
    overflow: hidden;
}
.kform-item-msg{
    display: flex;
    align-items: center;
    height: 16px;
    color: rgb(245, 108, 108);
    font-weight: 400;
    font-size: 12px;
}
.kform-item-inner{
    display: flex;
}
</style>
